import React from 'react'
import {withRouter} from 'react-router-dom'
import {Button, Card, Form, Input} from 'antd'
import {connect} from 'react-redux'
import ContentWrap from "../../../../components/Base/ContentWrap";
import Screen from "../../../../components/Base/Screen";
import PicUpload from "../../../../components/PicUpload/index";

import Immutable from 'immutable';
import Api from "../../../../configs/Api";
import CommonUtil from "../../../../utils/CommonUtil";
import RectTip from "../../../../components/RectTip";

const FormItem = Form.Item;

class AccountSet extends Screen {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.form.setFieldsValue({
            account: this.props.user.get('account', ''),
            nickname: this.props.user.get('nickname', ''),
            email: this.props.user.get('email', ''),

            qq_account: this.props.user.get('qq_account', ''),
            wx_account: this.props.user.get('wx_account', ''),
            mobile: this.props.user.get('mobile', ''),
        });
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll(async (err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
                values.avatar = this._picUpload._getAvatar();
                values.wx_qrcode = this._picUploadWx._getAvatar();
                values.id = this.props.user.get('id');

                let req = await this.request(Api.USER_SAVE, values);
                if (req.status !== Api.SUCCESS_CODE) return CommonUtil.toast(req.msg);

                // 登录成功
                this.onSetValueToStore(['root', 'user'], Immutable.fromJS(values), 'mergeIn');
                CommonUtil.toast('修改成功');
            }
        });
    };

    render() {
        const {getFieldDecorator} = this.props.form;

        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 4},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 10},
            },
        };

        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 16,
                    offset: 8,
                },
            },
        };

        return (
            <ContentWrap>
                <Card bordered={false}>
                    <Form
                        onSubmit={this.handleSubmit}
                    >
                        <FormItem
                            {...formItemLayout}
                            label="用户头像"
                        >
                            <div>
                                <div className="pic-load"><PicUpload ref={ref => this._picUpload = ref}
                                                                     avatar={this.props.user.get('avatar', '')}/></div>
                                <RectTip tip={'建议尺寸500×500或以上'} noBorder={true}/>
                            </div>
                        </FormItem>

                        <FormItem
                            {...formItemLayout}
                            label="账号"
                        >
                            {getFieldDecorator('account', {
                                rules: [{required: true, message: '账号不能为空!'}],
                            })(
                                <Input type="text"/>
                            )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="姓名"
                        >
                            {getFieldDecorator('nickname', {
                                rules: [{required: true, message: '姓名不能为空!'}],
                            })(
                                <Input type="text"/>
                            )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="邮箱"
                        >
                            {getFieldDecorator('email', {
                                rules: [{required: true, message: '邮箱不能为空!'}],
                            })(
                                <Input type="email"/>
                            )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="手机号"
                        >
                            {getFieldDecorator('mobile', {
                                rules: [{required: true, message: '手机号不能为空!'}],
                            })(
                                <Input type="text"/>
                            )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="QQ号"
                        >
                            {getFieldDecorator('qq_account', {
                                rules: [{required: true, message: 'QQ号不能为空!'}],
                            })(
                                <Input type="text"/>
                            )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="微信号"
                        >
                            {getFieldDecorator('wx_account', {
                                rules: [{required: true, message: '微信号不能为空!'}],
                            })(
                                <Input type="text"/>
                            )}
                        </FormItem>

                        <FormItem
                            {...formItemLayout}
                            label="微信二维码"
                        >
                            <div>
                                <div className="pic-load"><PicUpload ref={ref => this._picUploadWx = ref}
                                                                     avatar={this.props.user.get('wx_qrcode', '')}/>
                                </div>
                            </div>
                        </FormItem>

                        <FormItem {...tailFormItemLayout}>
                            <Button type="primary" htmlType="submit">提交</Button>
                        </FormItem>
                    </Form>
                </Card>
            </ContentWrap>
        )
    }
}

export default withRouter(connect(
    state => ({
        user: state.root.user
    })
)(Form.create()(AccountSet)))

